<template>
  	<section class="todoapp">
      <TodoHeader
      @addFn="addList"
      />
      <TodoMain 
      :arr="newList"
      @delFn="delList"
      />
      <TodoFooter
      :arr="list"
      @shoWFn="showList"
      @clearFn="clearList"
      />
		</section>
</template>

<script>
import './assets/css/base.css'
import './assets/css/index.css'

import TodoHeader from './three/TodoHeader.vue'
import TodoMain from './three/TodoMain.vue'
import TodoFooter from './three/TodoFooter.vue'
export default {
  data(){
    return{
      
       list:JSON.parse(window.localStorage.getItem('nList'))|| [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
      listType:''
    }
  },
  components:{
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  methods:{
    addList(info){
      const obj={id:Date.now(),name:info,isDone:false}
      this.list.push(obj)
    },
    delList(index){
      this.list.splice(index,1)
    },
    showList(type){
      this.listType=type
      // console.log(this.listType);
    },
    clearList(){
      return this.list=this.list.filter(item=>{return item.isDone===false})
    }
  },
  computed:{
    newList(){
      if(this.listType==='no'){
        return this.list.filter(item=>{return item.isDone===false})
      }else if(this.listType==='yes'){
        return this.list.filter(item=>{return item.isDone===true})
      }else{
       return this.list
      }
    }
  },
  watch:{
    list:{
      deep:true,
      handler(newval){
        window.localStorage.setItem('nList',JSON.stringify(newval))
      }
    }
  }
}
</script>

<style>

</style>